<%--
  Created by IntelliJ IDEA.
  User: yrq
  Date: 2019/6/12
  Time: 12:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="description" content="Aviato E-Commerce Template">

    <meta name="author" content="">

    <title>Aviato | E-commerce template</title>

    <!-- Mobile Specific Meta-->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="../../../images/favicon.png"/>

    <!-- Themefisher Icon font -->
    <link rel="stylesheet" href="../../../plugins/themefisher-font/style.css">
    <!-- bootstrap.min css -->
    <link rel="stylesheet" href="../../../plugins/bootstrap/css/bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="../../../plugins/slick-carousel/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="../../../plugins/slick-carousel/slick/slick-theme.css"/>

    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="../../../css/style.css">
</head>
<body>
<div class="modal product-modal fade" id="product-modal">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <i class="tf-ion-close"></i>
    </button>
    <div class="modal-dialog " role="document">

        <div class="modal-content">
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-8 col-sm-6 col-xs-12">
                        <div class="modal-image">
                            <img id="product_img" class="img-responsive" src="" alt="product-img"/>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 col-xs-12">
                        <div class="product-short-details">
                            <h2 id="product_name_color" class="product-title"></h2>
                            <p id="product_price" class="product-price"></p>
                            <p id="product_memo" class="product-short-description">

                            </p>
                            <a id="insertCart" onclick="" class="btn btn-main">Add To Cart</a>
                            <a id="goToPage" href="favorite.do" class="btn btn-transparent">View Product
                                Details</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    function findId(id) {
        $.ajax({
            type: "POST",
            url: "/shop/findId.do",
            data: {"id":id},
            success: function(msg){
                $("#product_img").attr("src",msg.img)
                $("#product_name_color").text(msg.name+", "+msg.color)
                $("#product_price").text("$"+msg.price)
                $("#product_memo").text(msg.memo)
                $("#goToPage").attr("href","/shop/page.do?id="+msg.id)
                $("#insertCart").attr("onclick","insertCart("+msg.id+")")
            }
        });
    }

    function insertFavorite(u_id,p_id) {
        $.ajax({
            type:"POST",
            url:"/favorite/insert.do",
            data:{"u_id":u_id,"p_id":p_id},
            success:function (msg) {
                if (msg) {
                    alert("收藏成功");
                }else {
                    alert("您已收藏过该商品");
                }
            }
        })
    }

    function insertCart(id) {
        $.ajax({
            type:"POST",
            url:"/cart/insert.do",
            data:{"p_id":id},
            success:function(msg){
                window.location.reload();
            }
        })
    }
</script>
</body>
</html>
